<template>
	<div>
		<el-tooltip placement="bottom" effect="light" :[visibleVal]="false">
			<template #content>
				<div style="max-height: 20vh;overflow:scroll;">
					<div v-for="(item,index) in state.allSelectedData" style="font-size:15px;line-height: 29px;display: flex;align-items: center;">
						<el-button  circle size="small" @click="deleteSelectedItem(index)" :disabled="props.config.disabled ||props.disabled">
							<Delete style="margin-right: 0px;"/>
						</el-button>
						<span>{{ getShowInfo(item) }}</span>
					</div>
				</div>
			</template>
			<el-input
				v-model="state.keyword"
				placeholder="请输入关键字"
				class="input-with-select"
				@keyup.enter="openDialog()"
				@click="openDialog()"
				:disabled="props.config.disabled ||props.disabled"
			>
				<template #append>
					<el-button @click="openDialog()" :disabled="props.config.disabled ||props.disabled">
						<el-icon>
							<Search style="margin-right: 0px;"/>
						</el-icon>
					</el-button>
				</template>
			</el-input>
		</el-tooltip>
		<MyDialog
			ref="myDialogRef"
			:getTableDataFunction="props.config.getTableDataFunction"
			:keyword="state.keyword"
			:detailPropList="props.config.detailPropList"
			:searchConfig="props.config.searchConfig"
			:multipleSelect="props.config.multipleSelect"
			:allSelectedData="state.allSelectedData"
			:selectedPropList="props.config.selectedPropList"
			@emitReturnInfo="handleReturnInfo"
		/>
	</div>
</template>
<script setup>
import { ref,computed,watch,defineExpose,defineProps, reactive} from "vue";
import MyDialog from "./base-ui/MyDialog.vue";
import { Search,Delete } from '@element-plus/icons-vue'
const emit=defineEmits(['update:modelValue']);
const props=defineProps({
	config:{//v-model的字段,父组件传来的
		type:Object,
		require:true,
		default:()=>({})
	},
	modelValue:{//v-model的字段,父组件传来的
		type:Object,
		require:false,
		default:()=>({})
	},
	disabled:{
		type:Boolean,
		require:false,
		default:false
	}
});
const state =reactive({
	keyword:'',
	allSelectedData:[]
})
const visibleVal = computed(()=>{ //在组件没有选中值时,给气泡组件加一个:visible='false',这样就不会有气泡了.如果选中了值,那就加一个别的没用的变量比如:biubiubiu='false'
	if(state.allSelectedData?.length>0){
		return 'biubiubiu'
	}else{
		return 'visible'
	}
})
const datas =ref([])
const myDialogRef = ref(null)
const handleReturnInfo = (data)=>{//拿到数据对数据处理
	state.allSelectedData = data
	myDialogRef.value.showDialog = false
}
const openDialog = ()=>{
	myDialogRef.value.showDialog = true
}
watch(()=>state.allSelectedData,(n)=>{
	if(n){
		setTimeout(()=>{
			state.keyword = n.map(item=>item[`${props.config.returnShowColomn}`]).join(",")
			let res;
			if(props.config.returnValueColomn){
				res = n.map(item=>item[`${props.config.returnValueColomn}`])
			}else{
				res = n
			}
			emit("update:modelValue",res)
		})
	}
},{
	deep:true
})
watch(()=>props.modelValue,(n)=>{
	if(n && Array.isArray(n)){
		state.allSelectedData = n;
	}else{
		state.allSelectedData = []
	}
},{
	deep:true,
	immediate:true
})
watch(()=>props.config.keyword,(n)=>{
	if(state){
		state.keyword=n
	}
},{immediate:true})
const getShowInfo = (item)=>{
	if(props.config.tooltip&&props.config.tooltip.length>0){//首先查看有没有定义气泡
			let showList = []
			for(let i =0;i<props.config.tooltip.length;i++){
				let colomn = props.config.tooltip[i] //'name'
				let a = item[`${colomn}`]
				a&&showList.push(a)
			}
			return showList.join(">>")
	}
	if(props.config.returnShowColomn){//如果没有,那么取回显值即可
		return item[`${props.config.returnShowColomn}`]
	}
}
const reset = ()=>{
	state.allSelectedData =undefined
}
const clearKeyWord = ()=>{
	state.keyword =''
}
const deleteSelectedItem = (index)=>{
	state.allSelectedData.splice(index,1)
}
defineExpose({
    datas, //真正的数据在这里!!
	reset,
	clearKeyWord
})
</script>
<style scoped>
</style>